<template>
	<view class="mall-container">
		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-bar">
				<view class="search-input">
					<text class="search-icon">��</text>
					<input 
						type="text" 
						placeholder="华为mate70pro" 
						class="search-text" 
						v-model="searchKeyword"
						@input="onSearchInput"
						@confirm="onSearch"
					/>
					<text class="camera-icon" @click="onScanCode">📷</text>
				</view>
				<button class="search-button" @click="onSearch">搜索</button>
			</view>
		</view>

		<!-- 分类导航 -->
		<view class="category-section">
			<scroll-view class="category-scroll" scroll-x>
				<view 
					v-for="(category, index) in categories" 
					:key="index"
					class="category-item" 
					:class="{ active: activeCategory === index }"
					@click="onCategoryClick(index)"
				>
					{{ category.name }}
				</view>
				<text class="arrow-down" @click="showMoreCategories">▼</text>
			</scroll-view>
		</view>

		<!-- 快捷图标 -->
		<view class="quick-section">
			<scroll-view class="quick-scroll" scroll-x>
				<view 
					v-for="(quick, index) in quickActions" 
					:key="index"
					class="quick-item"
					@click="onQuickActionClick(quick)"
				>
					<view class="quick-icon" :class="quick.iconClass">
						<text v-if="quick.icon">{{ quick.icon }}</text>
						<view v-if="quick.badge" class="yellow-dot"></view>
						<text v-if="quick.badgeText" class="free-text">{{ quick.badgeText }}</text>
						<text v-if="quick.badgeIcon" class="tree-icon">{{ quick.badgeIcon }}</text>
						<view v-if="quick.redPacket" class="red-packet">{{ quick.redPacket }}</view>
						<text v-if="quick.groupText" class="group-text">{{ quick.groupText }}</text>
					</view>
					<text class="quick-label">{{ quick.label }}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 轮播图 -->
		<view class="banner-carousel" v-if="banners.length > 0">
			<swiper 
				class="swiper" 
				:indicator-dots="true" 
				:autoplay="true" 
				:interval="3000" 
				:duration="500"
				@change="onBannerChange"
			>
				<swiper-item v-for="(banner, index) in banners" :key="index">
					<image :src="banner.image" class="banner-image" @click="onBannerClick(banner)"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 国家补贴区域 -->
		<view class="subsidy-section" v-if="subsidyProducts.length > 0">
			<view class="section-header">
				<text class="section-title">国家补贴</text>
				<text class="section-subtitle">× 百亿补贴</text>
			</view>
			<view class="subsidy-products">
				<view 
					v-for="(product, index) in subsidyProducts" 
					:key="index"
					class="subsidy-product"
					@click="onProductClick(product)"
				>
					<image :src="product.image" class="product-img"></image>
					<view class="subsidy-amount">已补{{ product.subsidy }}元</view>
					<view class="product-price">¥{{ product.price }}</view>
				</view>
			</view>
		</view>

		<!-- 品质生活区域 -->
		<view class="quality-section">
			<view class="section-header">
				<text class="section-title">品质生活</text>
				<text class="location-text">◎{{ currentLocation }}</text>
			</view>
			<view class="service-grid">
				<view 
					v-for="(service, index) in services" 
					:key="index"
					class="service-item"
					@click="onServiceClick(service)"
				>
					<view class="service-icon" :class="service.iconClass">
						<text v-if="service.icon">{{ service.icon }}</text>
						<text v-if="service.text" class="service-text">{{ service.text }}</text>
					</view>
					<text class="service-label">{{ service.label }}</text>
				</view>
			</view>
		</view>

		<!-- 9.9包邮区域 -->
		<view class="shipping-section" v-if="shippingProducts.length > 0">
			<view class="section-header">
				<text class="section-title">9.9包邮</text>
				<text class="section-subtitle">低价1元包邮</text>
			</view>
			<view class="shipping-products">
				<view 
					v-for="(product, index) in shippingProducts" 
					:key="index"
					class="shipping-product"
					@click="onProductClick(product)"
				>
					<image :src="product.image" class="product-img"></image>
					<view v-if="product.shippingText" class="shipping-text">{{ product.shippingText }}</view>
					<view v-if="product.price" class="product-price">¥{{ product.price }}</view>
				</view>
			</view>
		</view>

		<!-- 促销横幅 -->
		<view class="banner-section" v-if="promotionBanners.length > 0">
			<view 
				v-for="(banner, index) in promotionBanners" 
				:key="index"
				class="banner" 
				:class="banner.class"
				@click="onBannerClick(banner)"
			>
				<image :src="banner.image" class="banner-img"></image>
				<view class="banner-overlay">
					<text class="banner-title">{{ banner.title }}</text>
					<text class="banner-subtitle">{{ banner.subtitle }}</text>
				</view>
			</view>
		</view>

		<!-- 暑期清凉季横幅 -->
		<view class="summer-section" v-if="showSummerBanner">
			<view class="summer-banner" @click="onSummerBannerClick">
				<view class="summer-content">
					<text class="summer-text">Summer</text>
					<text class="summer-title">暑期清凉季</text>
					<text class="summer-desc">每满300减30</text>
					<button class="summer-button">去会场</button>
				</view>
				<image src="/static/palm-tree.png" class="palm-tree"></image>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="product-section" v-if="products.length > 0">
			<view class="product-row">
				<view 
					v-for="(product, index) in products.slice(0, 2)" 
					:key="index"
					class="product-card"
					@click="onProductClick(product)"
				>
					<image :src="product.image" class="product-img"></image>
					<view class="product-price">¥{{ product.price }}</view>
				</view>
			</view>
			<view class="small-products">
				<view 
					v-for="(product, index) in products.slice(2, 4)" 
					:key="index"
					class="small-card"
					@click="onProductClick(product)"
				>
					<image :src="product.image" class="small-img"></image>
				</view>
			</view>
		</view>

		<!-- PC产品卡片 -->
		<view class="pc-section" v-if="pcProducts.length > 0">
			<view 
				v-for="(product, index) in pcProducts" 
				:key="index"
				class="pc-card"
				@click="onProductClick(product)"
			>
				<image :src="product.image" class="pc-img"></image>
				<view class="pc-overlay">
					<view class="pc-price">¥{{ product.price }}起</view>
					<view class="pc-check">✓</view>
					<button class="pc-redpacket">{{ product.redPacket }}</button>
					<text class="pc-close" @click.stop="onCloseProduct(product)">✕</text>
				</view>
				<view class="pc-info">
					<text class="pc-title">{{ product.title }}</text>
					<text class="pc-desc">{{ product.desc }}</text>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore">
			<text v-if="loading" class="loading-text">加载中...</text>
			<text v-else class="load-more-text" @click="loadMore">加载更多</text>
		</view>

		<!-- 底部安全区域 -->
		<view class="safe-area"></view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { mockData, userApi } from '@/common/api.js'
import { showToast, showModal, showActionSheet, navigateTo } from '@/common/utils.js'

// 响应式数据
const searchKeyword = ref('')
const activeCategory = ref(0)
const currentLocation = ref('西安')
const loading = ref(false)
const hasMore = ref(true)
const showSummerBanner = ref(true)

// 分类数据
const categories = ref([
	{ name: '推荐', id: 'recommend' },
	{ name: '品质外卖', id: 'takeaway' },
	{ name: '国家补贴', id: 'subsidy' },
	{ name: '大家电', id: 'appliance' },
	{ name: '手机', id: 'phone' },
	{ name: '电脑', id: 'computer' }
])

// 快捷操作数据
const quickActions = ref([
	{
		label: '秒杀',
		icon: '⚡',
		iconClass: 'flash-sale',
		badge: true,
		action: 'flashSale'
	},
	{
		label: '东东农场',
		icon: '🌳',
		iconClass: 'farm',
		badgeText: '包邮',
		badgeIcon: '🌳',
		action: 'farm'
	},
	{
		label: '签到',
		icon: '📅',
		iconClass: 'checkin',
		redPacket: '红包',
		action: 'checkin'
	},
	{
		label: '万人团',
		icon: '🔥',
		iconClass: 'groupbuy',
		groupText: '拼',
		action: 'groupBuy'
	},
	{
		label: '新品',
		icon: '📦',
		iconClass: 'new',
		action: 'newProduct'
	},
	{
		label: '优惠',
		icon: '💰',
		iconClass: 'discount',
		action: 'discount'
	}
])

// 轮播图数据
const banners = ref([
	{ image: '/static/banner1.jpg', title: '爆品好价', subtitle: '抢百万红包雨', link: '/pages/activity/flash' },
	{ image: '/static/banner2.jpg', title: '直播低价', subtitle: '抢0.01元秒杀', link: '/pages/activity/live' }
])

// 国家补贴商品
const subsidyProducts = ref([
	{
		id: 1,
		image: '/static/phone.jpg',
		subsidy: '313.6',
		price: '6299',
		title: '华为Mate70 Pro'
	},
	{
		id: 2,
		image: '/static/fridge.jpg',
		subsidy: '21.1',
		price: '269.9',
		title: '海尔冰箱'
	}
])

// 服务数据
const services = ref([
	{
		label: '品质外卖',
		icon: '👜',
		iconClass: 'takeaway',
		text: '外卖',
		action: 'takeaway'
	},
	{
		label: '超市便利',
		icon: '',
		iconClass: 'supermarket',
		text: '24h\n超市便利',
		action: 'supermarket'
	},
	{
		label: '生鲜菜场',
		icon: '🥦',
		iconClass: 'fresh',
		action: 'fresh'
	},
	{
		label: '特价团购',
		icon: '',
		iconClass: 'group',
		text: '团购',
		action: 'groupBuy'
	},
	{
		label: '酒店机票',
		icon: '🌴',
		iconClass: 'hotel',
		action: 'hotel'
	}
])

// 包邮商品
const shippingProducts = ref([
	{
		id: 3,
		image: '/static/umbrella.jpg',
		shippingText: '便宜包邮',
		title: '雨伞'
	},
	{
		id: 4,
		image: '/static/eggs.jpg',
		price: '5.2',
		title: '新鲜鸡蛋'
	}
])

// 促销横幅
const promotionBanners = ref([
	{
		image: '/static/hot-banner.jpg',
		title: '爆品好价',
		subtitle: '抢百万红包雨',
		class: 'hot-banner',
		link: '/pages/activity/hot'
	},
	{
		image: '/static/live-banner.jpg',
		title: '直播低价',
		subtitle: '抢0.01元秒杀',
		class: 'live-banner',
		link: '/pages/activity/live'
	}
])

// 商品列表
const products = ref([
	{
		id: 5,
		image: '/static/ace-phone.jpg',
		price: '2099',
		title: 'Ace手机'
	},
	{
		id: 6,
		image: '/static/gaming-mouse.jpg',
		price: '799',
		title: '游戏鼠标'
	},
	{
		id: 7,
		image: '/static/gold-phone.jpg',
		price: '3999',
		title: '金色手机'
	},
	{
		id: 8,
		image: '/static/msi-gpu.jpg',
		price: '2999',
		title: 'MSI显卡'
	}
])

// PC产品
const pcProducts = ref([
	{
		id: 9,
		image: '/static/gaming-pc.jpg',
		price: '6.88',
		title: '2025款i9级18核4060台...',
		desc: '京东物流 包邮 免费上门退换',
		redPacket: '现金群红包'
	}
])

// 方法定义
const onSearchInput = (e) => {
	searchKeyword.value = e.detail.value
}

const onSearch = () => {
	if (!searchKeyword.value.trim()) {
		showToast('请输入搜索关键词')
		return
	}
	
	navigateTo(`/pages/search/search?keyword=${encodeURIComponent(searchKeyword.value)}`)
}

const onScanCode = () => {
	uni.scanCode({
		success: (res) => {
			console.log('扫码结果:', res.result)
			navigateTo(`/pages/product/detail?code=${encodeURIComponent(res.result)}`)
		},
		fail: (err) => {
			showToast('扫码失败')
		}
	})
}

const onCategoryClick = (index) => {
	activeCategory.value = index
	loadProductsByCategory(categories.value[index].id)
}

const showMoreCategories = async () => {
	try {
		const index = await showActionSheet(['全部分类', '数码产品', '服装鞋帽', '家居用品', '食品生鲜'])
		console.log('选择了分类:', index)
	} catch (error) {
		console.log('取消选择分类')
	}
}

const onQuickActionClick = (action) => {
	switch (action.action) {
		case 'flashSale':
			uni.navigateTo({ url: '/pages/activity/flash' })
			break
		case 'farm':
			uni.navigateTo({ url: '/pages/farm/index' })
			break
		case 'checkin':
			uni.navigateTo({ url: '/pages/checkin/index' })
			break
		case 'groupBuy':
			uni.navigateTo({ url: '/pages/group/index' })
			break
		case 'newProduct':
			uni.navigateTo({ url: '/pages/product/new' })
			break
		case 'discount':
			uni.navigateTo({ url: '/pages/activity/discount' })
			break
		default:
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			})
	}
}

const onBannerChange = (e) => {
	console.log('轮播图切换:', e.detail.current)
}

const onBannerClick = (banner) => {
	if (banner.link) {
		uni.navigateTo({ url: banner.link })
	}
}

const onProductClick = (product) => {
	uni.navigateTo({
		url: `/pages/product/detail?id=${product.id}`
	})
}

const onServiceClick = (service) => {
	switch (service.action) {
		case 'takeaway':
			uni.navigateTo({ url: '/pages/takeaway/index' })
			break
		case 'supermarket':
			uni.navigateTo({ url: '/pages/supermarket/index' })
			break
		case 'fresh':
			uni.navigateTo({ url: '/pages/fresh/index' })
			break
		case 'groupBuy':
			uni.navigateTo({ url: '/pages/group/index' })
			break
		case 'hotel':
			uni.navigateTo({ url: '/pages/hotel/index' })
			break
		default:
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			})
	}
}

const onSummerBannerClick = () => {
	uni.navigateTo({ url: '/pages/activity/summer' })
}

const onCloseProduct = (product) => {
	const index = pcProducts.value.findIndex(p => p.id === product.id)
	if (index > -1) {
		pcProducts.value.splice(index, 1)
	}
}

const loadProductsByCategory = (categoryId) => {
	loading.value = true
	// 模拟API调用
	setTimeout(() => {
		// 根据分类加载商品
		console.log('加载分类商品:', categoryId)
		loading.value = false
	}, 1000)
}

const loadMore = () => {
	if (loading.value || !hasMore.value) return
	
	loading.value = true
	// 模拟加载更多数据
	setTimeout(() => {
		// 添加更多商品到列表
		loading.value = false
		hasMore.value = false // 模拟没有更多数据
	}, 1500)
}

// 下拉刷新
const onPullDownRefresh = async () => {
	try {
		await loadInitialData()
		await getUserLocation()
		
		uni.stopPullDownRefresh()
		uni.showToast({
			title: '刷新成功',
			icon: 'success'
		})
	} catch (error) {
		console.error('刷新失败:', error)
		uni.stopPullDownRefresh()
		uni.showToast({
			title: '刷新失败',
			icon: 'none'
		})
	}
}

// 上拉加载
const onReachBottom = () => {
	loadMore()
}

// 生命周期
onMounted(() => {
	// 获取用户位置
	getUserLocation()
	// 加载初始数据
	loadInitialData()
})

onUnmounted(() => {
	// 清理工作
})

// 获取用户位置
const getUserLocation = async () => {
	try {
		const location = await userApi.getUserLocation()
		console.log('位置信息:', location)
		// 这里应该根据坐标解析城市名称
		// 暂时使用默认值
		currentLocation.value = '西安'
	} catch (error) {
		console.log('获取位置失败:', error)
		// 使用默认位置
		currentLocation.value = '西安'
	}
}

// 加载初始数据
const loadInitialData = async () => {
	try {
		loading.value = true
		const data = await mockData.getHomeData()
		
		// 更新数据
		banners.value = data.banners || []
		categories.value = data.categories || []
		subsidyProducts.value = data.subsidyProducts || []
		shippingProducts.value = data.shippingProducts || []
		products.value = data.products || []
		pcProducts.value = data.pcProducts || []
		
		console.log('首页数据加载成功')
	} catch (error) {
		console.error('加载首页数据失败:', error)
		uni.showToast({
			title: '数据加载失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 暴露方法给页面使用
defineExpose({
	onPullDownRefresh,
	onReachBottom
})
</script>

<style>
.mall-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 搜索栏 */
.search-section {
	background-color: #fff;
	padding: 10px 15px;
}

.search-bar {
	display: flex;
	align-items: center;
	gap: 10px;
}

.search-input {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #f8f8f8;
	border-radius: 20px;
	padding: 8px 15px;
	gap: 8px;
}

.search-icon, .camera-icon {
	font-size: 16px;
	color: #999;
}

.search-text {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 14px;
	color: #333;
}

.search-button {
	background-color: #e4393c;
	color: white;
	border: none;
	border-radius: 20px;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: bold;
}

/* 分类导航 */
.category-section {
	background-color: #fff;
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
}

.category-scroll {
	white-space: nowrap;
	padding: 0 15px;
}

.category-item {
	display: inline-block;
	padding: 6px 15px;
	margin-right: 10px;
	border-radius: 15px;
	font-size: 14px;
	color: #666;
	background-color: #f8f8f8;
}

.category-item.active {
	background-color: #e4393c;
	color: white;
}

.arrow-down {
	display: inline-block;
	margin-left: 10px;
	color: #999;
	font-size: 12px;
}

/* 快捷图标 */
.quick-section {
	background-color: #fff;
	padding: 15px 0;
	border-bottom: 1px solid #f0f0f0;
}

.quick-scroll {
	white-space: nowrap;
	padding: 0 15px;
}

.quick-item {
	display: inline-block;
	text-align: center;
	margin-right: 20px;
	min-width: 60px;
}

.quick-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-bottom: 8px;
	font-size: 20px;
}

.flash-sale {
	background-color: #e4393c;
	color: white;
}

.farm {
	background-color: #52c41a;
	color: white;
}

.checkin {
	background-color: #e4393c;
	color: white;
}

.groupbuy {
	background-color: #e4393c;
	color: white;
}

.new {
	background-color: #666;
	color: white;
}

.discount {
	background-color: #fa8c16;
	color: white;
}

.yellow-dot {
	width: 8px;
	height: 8px;
	background-color: #ffd700;
	border-radius: 50%;
	position: absolute;
	top: 5px;
	right: 5px;
}

.free-text {
	position: absolute;
	bottom: 2px;
	right: 2px;
	font-size: 10px;
	color: white;
}

.tree-icon {
	position: absolute;
	top: 2px;
	left: 2px;
	font-size: 12px;
}

.red-packet {
	background-color: #e4393c;
	color: white;
	font-size: 10px;
	padding: 2px 4px;
	border-radius: 8px;
	position: absolute;
	top: -5px;
	right: -5px;
}

.group-text {
	position: absolute;
	bottom: 2px;
	right: 2px;
	font-size: 10px;
	font-weight: bold;
}

.quick-label {
	font-size: 12px;
	color: #666;
}

/* 区域通用样式 */
.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

.section-subtitle {
	font-size: 12px;
	color: #999;
	margin-left: 5px;
}

.location-text {
	font-size: 12px;
	color: #666;
	margin-left: 10px;
}

/* 国家补贴区域 */
.subsidy-section {
	background-color: #fff;
	margin: 10px 0;
	padding: 15px;
}

.subsidy-products {
	display: flex;
	gap: 10px;
}

.subsidy-product {
	flex: 1;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-img {
	width: 100%;
	height: 120px;
	object-fit: cover;
}

.subsidy-amount {
	font-size: 12px;
	color: #e4393c;
	padding: 5px 10px;
}

.product-price {
	font-size: 16px;
	font-weight: bold;
	color: #e4393c;
	padding: 5px 10px;
}

/* 品质生活区域 */
.quality-section {
	background-color: #fff;
	margin: 10px 0;
	padding: 15px;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

.service-item {
	text-align: center;
}

.service-icon {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8px;
	color: white;
	font-size: 12px;
}

.takeaway {
	background-color: #8b4513;
}

.supermarket {
	background-color: #e4393c;
}

.fresh {
	background-color: #52c41a;
}

.group {
	background-color: #e4393c;
}

.hotel {
	background-color: #52c41a;
}

.service-text {
	font-size: 10px;
	line-height: 1.2;
}

.service-label {
	font-size: 12px;
	color: #666;
}

/* 9.9包邮区域 */
.shipping-section {
	background-color: #fff;
	margin: 10px 0;
	padding: 15px;
}

.shipping-products {
	display: flex;
	gap: 10px;
}

.shipping-product {
	flex: 1;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.shipping-text {
	font-size: 12px;
	color: #e4393c;
	padding: 5px 10px;
}

/* 轮播图 */
.banner-carousel {
	margin: 10px 0;
}

.swiper {
	height: 150px;
}

.banner-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 促销横幅 */
.banner-section {
	display: flex;
	gap: 10px;
	padding: 0 15px;
	margin: 10px 0;
}

.banner {
	flex: 1;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

.banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner-overlay {
	position: absolute;
	bottom: 10px;
	left: 10px;
	color: white;
}

.banner-title {
	font-size: 14px;
	font-weight: bold;
	display: block;
	margin-bottom: 2px;
}

.banner-subtitle {
	font-size: 12px;
	display: block;
}

.hot-banner {
	background: linear-gradient(45deg, #e4393c, #ff6b6b);
}

.live-banner {
	background: linear-gradient(45deg, #8b5cf6, #a855f7);
}

/* 暑期清凉季横幅 */
.summer-section {
	padding: 0 15px;
	margin: 10px 0;
}

.summer-banner {
	background: linear-gradient(90deg, #1890ff, #40a9ff);
	border-radius: 8px;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: white;
}

.summer-content {
	display: flex;
	flex-direction: column;
}

.summer-text {
	font-size: 12px;
	color: #ffd700;
	font-style: italic;
	margin-bottom: 5px;
}

.summer-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}

.summer-desc {
	font-size: 12px;
	margin-bottom: 10px;
}

.summer-button {
	background-color: white;
	color: #1890ff;
	border: none;
	border-radius: 15px;
	padding: 5px 15px;
	font-size: 12px;
	align-self: flex-start;
}

.palm-tree {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

/* 商品列表 */
.product-section {
	padding: 0 15px;
	margin: 10px 0;
}

.product-row {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.product-card {
	flex: 1;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.small-products {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.small-card {
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.small-img {
	width: 100%;
	height: 80px;
	object-fit: cover;
}

/* PC产品卡片 */
.pc-section {
	padding: 0 15px;
	margin: 10px 0;
}

.pc-card {
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	position: relative;
}

.pc-img {
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.pc-overlay {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.pc-price {
	background-color: #e4393c;
	color: white;
	padding: 5px 10px;
	border-radius: 15px;
	font-size: 12px;
	font-weight: bold;
}

.pc-check {
	color: #52c41a;
	font-size: 16px;
	font-weight: bold;
}

.pc-redpacket {
	background-color: #e4393c;
	color: white;
	border: none;
	border-radius: 15px;
	padding: 5px 10px;
	font-size: 10px;
}

.pc-close {
	color: #999;
	font-size: 16px;
}

.pc-info {
	padding: 10px;
}

.pc-title {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 5px;
}

.pc-desc {
	font-size: 12px;
	color: #e4393c;
}

/* 加载更多 */
.load-more {
	text-align: center;
	padding: 20px 0;
	color: #999;
	font-size: 14px;
}

.loading-text {
	color: #999;
}

.load-more-text {
	color: #1890ff;
	text-decoration: underline;
}

/* 底部安全区域 */
.safe-area {
	height: 0; /* 占位，防止底部被遮挡 */
}
</style>
